<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="52%"
      :before-close="btnCancel"
    >
      <el-form
        ref="roleFormRef"
        :model="roleForm"
        :rules="roleRules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="roleForm.title" />
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody" class="quill-text">
          <vue-quill :form-data="roleForm.articleBody" @update:content="handleUpdate"></vue-quill>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="roleForm.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" align="middle" justify="center">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import vueQuill from './vue-quill'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    },
    title: {
      type: String,
      default: '新增文章'
    },
    roleForm: {
      type: Object,
      default: () => ({
        title: '',
        articleBody: '',
        videoURL: '',
        id: 0
      })
    }
  },
  components: {
    vueQuill
  },
  data () {
    return {
      roleRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{
          required: true,
          message: '请输入文章内容',
          trigger: 'change'
        }]
      },
      value: true,
      test: ''
    }
  },
  methods: {
    handleUpdate (newContent) {
      this.roleForm.articleBody = newContent
    },
    btnCancel () {
      this.$refs.roleFormRef.resetFields()
      this.$emit('onclose')
    },
    btnOk () {
      this.$refs.roleFormRef.validate(async validated => {
        if (validated) {
          this.$emit('onconfirm', { ...this.roleForm })
          this.btnCancel()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep .quill-text .el-form-item__content {
    height: 240px;
  }
</style>
